<!-- <template>
	<view class="main">
		<view class="main_body">
			<view class="content">
		    <view class="head">
				<text class="title">手机号登录/注册</text>
				<text class="subtitle">首次验证码通过即注册招聘账户</text>
		    </view>
		    <view class="item_body" style="margin:40rpx">
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="text" v-model="form.username" placeholder="姓名" ></view>
		        <view class="baikuang"><input class="item_input" placeholder-style="color:#FFF"  type="password" v-model='form.password'  placeholder="密码"></view>
		        <view class="baikuang">
							<xl-slider-verify @success="verifySuccess" :reset="false"></xl-slider-verify>
						</view>
		        <button class="loginbut" @click="loginBut">提交</button>
						<view class="item_bottom">
							<view @tap="goto('/pages/login/register')">没有账号？立即注册</view>
							<view @tap="goto('/pages/login/getpwd')">忘记密码</view>
						</view>
						<view @tap="wxLogin" class="item_bottom" style="justify-content: center;flex-wrap: wrap;margin-top: 0;">
							<u-icon name="weixin-fill" color="#2979ff" size="42"></u-icon>
							<view style="width: 100%;text-align: center;">微信登录</view>
						</view>
		    </view>
			</view>
		</view>
		<u-modal
			title="账号注册类型"
			:show="showModal"
			showCancelButton
			asyncClose
			@confirm="Recharge"
			@cancel="() => showModal = false"
		>
			<veiw class="content_box">
				<view style="margin:40rpx">
					<u-radio-group
						v-model="form.type"
						@change="groupChange"
					>
						<u-radio
							:customStyle="{marginRight: '16px'}"
							v-for="(item, index) in radiolist"
							:key="index"
							:label="item.name"
							:name="item.type"
							labelColor="#000"
						>
						</u-radio>
					</u-radio-group>
				</view>
			</veiw>
		</u-modal>
	</view>
</template>
<script>
	import util from "@/utils/utils.js"
	import { login,wxappAuth } from '@/api/login.js'
	import xlSliderVerify from '@/components/xl-slider-verify/xl-slider-verify.vue'
	export default {
		components:{
			xlSliderVerify
		},
		data() {
			return {
				form: {
					verify:false,
					username:'',
					nickName:'',
					avatarUrl:'',
					password:'',
					encryptedData:'',
					iv:'',
					code:'',
					type:1,
				},
				showModal:false,
				radiolist: [{
						type:1,
						name: '用户注册',
						disabled: true
					},
					{
						type:2,
						name: '企业注册',
						disabled: false
					}
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			verifySuccess(){
				this.form.verify = true
			},
			
			loginBut(){
				let that = this
				if (this.form.username == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写账号'
					});
				}
				if (this.form.password == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写密码'
					});
				}
				if (!this.form.verify) {
					return uni.showToast({
						icon: 'none',
						title: '请先滑动验证'
					});
				}
				
				let data = {
					username:this.form.username,
					password:this.form.password
				}
				login(data).then(res=>{
					if(res.code == 200){
						util.set('token', res.data.token)
						util.set('type',res.data.type)
						let type = util.get('type')
					
						if(res.data.type == 1){
							if(res.data.isauth == 1){
								that.goto('/resume/index')
							}
							else{
								that.goto('/resume/basic')
							}
						}
						else{
							if(res.data.isauth == 1){
								that.goto('/pages/enterprise/index')
							}
							else{
								that.goto('/pages/enterprise/basic')
							}
						}
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			wxLogin(){
			  // #ifdef MP-WEIXIN
				var that = this
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						console.log("微信信息：",res)
						that.form.iv = res.iv
						that.form.encryptedData = res.encryptedData
						that.form.nickName = res.userInfo.nickName
						that.form.avatarUrl = res.userInfo.avatarUrl
						let code = that.getCode()
						if(code){
							that.form.code = code
							that.wechatlogin()
						}else{
							uni.login({
								success: res => {
									that.loadModal = true
									that.form.code = res.code
									var storage = {
										'code':that.form.code,
										'time': (new Date()).getTime(),
									}
									uni.setStorageSync('wechatcode', storage)
									that.wechatlogin()
								}
							});
						}
					},
					fail: (res) => {
						return uni.showToast({
							title:"授权微信信息异常"+res,
							duration: 2000,
							icon:'none'
						});  
					}
				});
				//#endif
			},
			
			wechatlogin(){
				let that = this
				wxappAuth(that.form).then(res => {
					if(res.code == 200){
						if(res.data.type > 0){
							util.set('token', res.data.token)
							util.set('type',res.data.type)
							if(res.data.type == 1){
								if(res.data.isauth == 1){
									that.goto('/resume/index')
								}
								else{
									that.goto('/resume/basic')
								}
							}
							else if(res.data.type == 2){
								if(res.data.isauth == 1){
									that.goto('/pages/enterprise/index')
								}
								else{
									that.goto('/pages/enterprise/basic')
								}
							}
						}
						else{
							that.showModal = true
							this.form.username = res.data.user_name
							this.form.password = '123456'
						}
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				});
			},
			
			//账号类型
			groupChange(n) {
				this.form.type = n
			},
			
			Recharge(){
				let that = this
				let data = {
					username:this.form.username,
					password:this.form.password,
					type:this.form.type
				}
				login(data).then(res=>{
					if(res.code == 200){
						util.set('token', res.data.token)
						util.set('type',res.data.type)
						let type = util.get('type')
					
						if(res.data.type == 1){
							if(res.data.isauth == 1){
								that.goto('/resume/index')
							}
							else{
								that.goto('/resume/basic')
							}
						}
						else{
							if(res.data.isauth == 1){
								that.goto('/pages/enterprise/index')
							}
							else{
								that.goto('/pages/enterprise/basic')
							}
						}
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			
			getCode(){
				const info = uni.getStorageSync('wechatcode');
					if (info){
						var before = new Date().getTime() - 5 * 3600;
						if (before < info.time){
							return info.code
						}else{
							uni.removeStorageSync('wechatcode')
							return false
						}
					}
					else{
						return false
					}
			},
			
			goto(tourl) {
				uni.redirectTo({
					url: tourl
				});
			}
		}
	}
</script>

<style>
	.head{
				width: 100%;
				padding-top:124rpx;
			}
			.title {
			  width: 150px;
			  height: 28px;
			  font-family: PingFang SC;
			  font-weight: 500;
			  font-size: 20px;
			  line-height: 28px;
			  letter-spacing: 0px;
			  color: #000;
			  display: block;
			  margin-bottom: 5px;
			}
			
			.subtitle {
			  width: 182px;
			  height: 18px;
			  font-family: PingFang SC;
			  font-weight: 400;
			  font-size: 13px;
			  line-height: 18.2px;
			  letter-spacing: 0%;
			  color: #333;
			}
			
			.item_body{
				background:rgba(0,38,53,0.5);
				padding: 50rpx 26rpx;
				display: flex;
				flex-wrap: wrap;
				border-radius: 30rpx;
			}
	
			.item_body .baikuang{
				width: 100%;
				position: relative;
				margin-bottom: 40rpx;
			}
			.item_body .baikuang .item_input{
				background:rgba(77,94,104,0.5);
				height: 76rpx;
				line-height: 76rpx;
				padding-left: 25rpx;
				color: #fff;
			}
			.item_body .baikuang .yzmbtn{
				position: absolute;
				background-color: #fff;
				width: 220rpx;
				margin: auth;
				text-align: center;
				height: 76rpx;
				line-height: 76rpx;
				right: 0;
				top: 0;
			}
			.loginbut {
			    width: 100%;
			    height: 80rpx;
			    display: block;
			    line-height: 80rpx;
			    background: #43e4f8;
			    border-radius: 10rpx;
			    font-size: 28rpx;
			    color: #fff;
			    text-align: center;
			    border: #43e4f8 solid 4rpx;
			}
	    .item_bottom{
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #fff;
				height: 50rpx;
				margin: 40rpx 0;
			}
	</style>-->

<template>
	<view class="main">
		<!-- <uni-nav-bar
		  :fixed="true"
		  :shadow="false"
		  :statusBar="true"
		  :leftIcon="options.pid ? 'iconshouye11' : 'icon-left'"
		  :title="detail.type == 1 ? '动态详情' : ' '"
		  color="#ffffff"
		  :style="{ background: detail.type == 1 ? gradientBackground : 'none' }"></uni-nav-bar>
		  <uni-nav-bar-space-holder></uni-nav-bar-space-holder> -->
		<view class="main_body">
			<view class="content">
				<view class="head">
					<text class="title">手机号登录/注册</text>
					<text class="subtitle">首次验证码通过即注册招聘账户</text>
				</view>
				<view class="item_body" >
					  <!-- 手机号输入框 -->
					<view class="baikuang">
						<text class="prefix">+86</text>
						<image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf29ea64e4.png" style="width: 9px;height: 6px; margin-top: 5px;" />
						<input class="item_input" placeholder-style="color:#FFF" type="text" v-model="phone" placeholder="请输入手机号" >
					</view>
					<view class="agreement">
					    <!-- 协议勾选 -->
					    <view class="custom-checkbox" @tap="onAgree">
					      <image
					        :src="isAgreed ? '/static/img/checked.svg' : '/static/img/unchecked.svg'"
					        mode="aspectFit"
					        style="width: 20px; height: 20px;"
					      />
					    </view>
					    <!-- 协议文本 -->
					    <text class="agreement-text">
					      已阅读并同意
					      <text class="link" @tap="gotoAgreement">(招聘用户协议)</text>
					      和
					      <text class="link" @tap="gotoPrivacy">(隐私政策)</text>
					      ，允许统一管理本人账户信息
					    </text>
					  </view>
  <!-- 下一步按钮 -->
					<button :class=" 'loginbut ' +( isAgreed && phone ? 'OK' : 'disabled' )" @click="nextStep" :disabled="!isAgreed || !phone" :data-test=" isAgreed ? 'yes' : 'no'">下一步</button>
					<view class="item_bottom">
						<!-- <view @tap="goto('/pages/login/register')">没有账号？立即注册</view> -->
						<!-- <view @tap="goto('/pages/login/getpwd')">忘记密码</view> -->
						<text class="footer-text">接收不到短信</text>
					</view>
						<text class="footer-text-other">或通过以下方式登录</text>
					<view @tap="wxLogin" class="item_bottom" style="justify-content: center;flex-wrap: wrap;margin-top: 0;">
						<u-icon name="weixin-fill" color="#28C445" size="37"></u-icon>
						<!-- <view style="width: 100%;text-align: center;">微信登录</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/utils/utils.js";
	
	export default {
		
		data() {
			return {
					phone: '', // 手机号
				isAgreed: false, // 是否同意协议
				
				 // 示例数据
				      options: {
				        pid: 123, // 假设存在 pid
				      },
				      detail: {
				        type: 1, // 假设 type 为 1
				      },
				      // 渐变色
				      gradientBackground: 'linear-gradient(90deg, #007AFF, #00FFAA)', // 自定义渐变色
			};
		},
		methods: {
			// 手机号输入事件
			  onPhoneInput(e) {
			    this.phone = e.detail.value;
			    },
			 // 同意协议
			    onAgree() {
			      this.isAgreed = !this.isAgreed; // 切换勾选状态
			    },
			 // 跳转到用户协议
			    gotoAgreement() {
			      uni.navigateTo({
			        url: '/pages/article/agreement', // 用户协议页面路径
			      });
			    },
			 // 跳转到隐私政策
			    gotoPrivacy() {
			      uni.navigateTo({
			        url: '/pages/article/yinsi', // 隐私政策页面路径
			      });
			    },
			// 下一步
			nextStep() {
				 const { phone } = this;
				 const {isAgreed} = this;
				 // 校验手机号
				    if (!phone) {
				      uni.showToast({
				        title: '请输入手机号',
				        icon: 'none',
				      });
				      return;
				    }
				  // 校验手机号格式
				      if (!/^1[3456789]\d{9}$/.test(phone)) {
				        uni.showToast({
				          title: '手机号格式错误',
				          icon: 'none',
				        });
				        return;
				      }
				
				  // 校验是否同意协议
				  if (!isAgreed) {
				    uni.showToast({
				      title: '请先同意协议',
				      icon: 'none',
				    });
				    return;
				  }
				/* if (!this.form.phone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					});
				} */
				// 跳转到验证码输入页面，并传递手机号
				uni.navigateTo({
					url: `/pages/login/verify?phone=${phone}`,
				});
			},
			// 微信登录
			wxLogin() {
				// 微信登录逻辑
				uni.showToast({
				      title: '微信登录功能待实现',
				      icon: 'none',
				    });
			},
			// 跳转到其他页面
			goto(url) {
				uni.redirectTo({
					url: url,
				});
			},
		},
	};
</script>

<style>
	.head {
		width: 100%;
		/* padding-top: 124rpx; */
	}

	.title {
		width: 150px;
		height: 28px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20px;
		line-height: 28px;
		letter-spacing: 0px;
		color: #000;
		display: block;
		margin-bottom: 5px;
	}

	.subtitle {
		width: 182px;
		height: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 13px;
		line-height: 18.2px;
		letter-spacing: 0%;
		color: #333;
	}

	.item_body {
		padding-top: 50rpx ;
		display: flex;
		flex-wrap: wrap;
		border-radius: 30rpx;
	}

	.item_body .baikuang {
		width: 100%;
		position: relative;
		margin-bottom: 40rpx;
		font-weight: 400;
		font-size: 15px;
		line-height: 21px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EBEBEB;
		padding-bottom: 10px;

	}
	
	.prefix {
	  font-size: 16px;
	  color: #333;
	  margin-right: 10rpx;
	}

	.item_body .baikuang .item_input {
		height: 76rpx;
		line-height: 76rpx;
		padding-left: 25rpx;
		background-color: transparent; /* 确保背景透明 */
		border: none; /* 移除边框 */
		  outline: none; /* 移除聚焦时的外边框 */
		color: #333;
		flex: 1;
		 min-width: 200px; /* 设置最小宽度 */
		z-index: 1; /* 确保输入框在最上层 */
	}
	

	/* 协议勾选 */
	.agreement {
	  display: flex;
	  align-items: center;
	  margin-bottom: 30px;
	}

	/* 自定义复选框样式 */
	.custom-checkbox {
	  display: flex;
	  align-items: center;
	  justify-content: center;

	  width: 17px;
	  height: 17px; 
	  margin-bottom: 15px;
	   /* transform: scale(0.6);调整大小 */
	}

	.agreement-text {
	  width: 300px;
	  height: 34px;
	  font-family: PingFang SC;
	  font-weight: 400;
	  font-size: 12px;
	  line-height: 16.8px;
	  letter-spacing: 0px;
	  color: #999;
	  margin-left: 5rpx;
	}

	.link {
	  color: #0822cc;
	}

	.loginbut {
		width: 100%;
				height: 80rpx;
				line-height: 80rpx;
		    background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
		  	border-radius: 32px;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				pointer-events: auto; /* 确保用户交互正常 */
	}

	.loginbut[disabled] {
	  background-color: #ccc;
	}

	.item_bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: #999;
		height: 50rpx;
		margin: 40rpx 0;
	}
	.footer-text {
	  width: 72px;
	  height: 17px;
	  
	  font-size: 12px;
	  color: #999;
	  display: block;
	  margin-bottom: 10px;
	}
	
	.footer-text-other{
	  width: 108px;
	  height: 17px;
	  font-size: 12px;
	  justify-content: center;
	  color: #999;
	  display: block;
	  margin: 120px auto 10px;
	}
</style>
    